<template>
  <div id="left2">
    <div class="centerTitle">
      <div class="asTitle">宽带网&高清网</div>
    </div>
    <div class="up">
      <div class="item" v-for="item in titleItem" :key="item.title">
        <!-- 小块块上的字体设置 -->
        <div class="ml-3 h-48 colorBlue fw-b fs-xxxxl">{{ item.title }}</div>
        <div class="dv-dig-flop ml-1 mt-10 pl-3">
          {{ item.number.number[0] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CenterChart from "@/components/echart/center/centerChartRate";
export default {
  data() {
    return {
      titleItem: [
        {
          title: "宽带用户数",
          number: {
            number: [120],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "高清用户数",
          number: {
            number: [18],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "视频质量优良率",
          number: {
            number: [2],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "直播时延达标率",
          number: {
            number: [14],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "点播时延达标率",
          number: {
            number: [106],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
      ],
    };
  },
  components: {
    // CenterChart,
  },
};
</script>

<style lang="scss" scoped>
#left2 {
  display: flex;
  height: 42vh;
  flex-direction: column;
  .centerTitle {
    flex: 1;
    padding: 0.15vh 0.15vw;
    text-align: left;
    font-size: 2vw;
    font-weight: bold;
    .asTitle {
      padding-left: 2vw;
      // 使用相对位置让问题垂直居中
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .up {
    flex: 4;
    width: 95%;
    margin: 0.3vh auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .item {
      text-align: center;
      border-radius: 6px;
      padding-top: 0.1vh;
      margin-top: 0.1vh;
      width: 33.333%;
      // height: 20vh;
      .dv-dig-flop {
        // width: 9vh;
        padding-top: 0.5vh;
        font-size: 2vw;
      }
    }
  }
}
</style>
